<template>
  <div class="sl_btn__container base-padding">
    <div class="btn" :style="sly" :class="handleClass">
      {{ title }}
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sl-btn',
    props: {
      title: '',
      sly: {},
      size: String
    },
    computed: {
      handleClass () {
        let _class = ''
        switch (this.size) {
          case '16':
            _class = 'sl_font_size_16'; break
        }
        return _class
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"
  .sl_btn__container
    padding-top 1.5 * .61rem
    padding-bottom 1.5 * .61rem
    .btn
      width 100%
      padding-top 1.5 * .61rem
      padding-bottom 1.5 * .61rem
      text-align center
      background #46a1bb
      color #fff
      font-size $sl_font_size_20
      border-radius 2px
      &.sl_font_size_16
        font-size $sl_font_size_16
</style>
